{% extends '::base.html.twig' %}

{% block services_attributes %} class="active"{% endblock %}

{% block title %}{% trans %}Educino Services{% endtrans %}{% endblock %}

{% block body %}

<div class="row-fluid whiteWrapper">
    <fieldset>
        <legend>{% trans %}Services{% endtrans %}</legend>
        <hr class="smallHr">
        <p class="clear">{% trans %}If you are interested in a service that is not listed, such as editing cover letters or refining applications for scholarships and fellowships, please contact us and we will be happy to assist you.{% endtrans %}</p>
    </fieldset>
    <div class="row-fluid servicesContainer">
        {% for category in categories %}
            <div class=" serviceBlock">
                <h2 class="serviceHeader">{{ category.getName(locale) }}</h2>
                <p class="description">
                {{ category.getDescription(locale) }}
                    </p>
                    <button class="btn blue servicesCategory" id="{{ category.id }}">Get Started</button>
                </div>
        {% endfor %}  
        
        <div style="text-align: center;margin: 20px;display: none;" class="cat-loading">
        <img src="{{ asset('img/ajax-loader2.gif') }}"/>
        </div>
            </div>

            <div class="row-fluid toggleContainer" >

            </div>

            <div class="row-fluid " >
                <a class="customServices btn green left" href="{{ path('contact_us') }}">{% trans %}Custom Requests{% endtrans %}</a>
                <span class="customServicesText left">{% trans %}If you are interested in a service that is not listed, such as editing cover letters or refining applications for scholarships and fellowships, please contact us and we will be happy to assist you.{% endtrans %}</span>
            </div>

        </div>

{% endblock %}

{% block javascripts %}
{{parent()}}
        <script>
            $(document).ready(function(){
                 $(".servicesContainer .serviceBlock").click(function () {
                    $(".servicesContainer .serviceBlock").removeClass("active")
                    $(this).toggleClass("active");
                });

                /*$(".serviceBlock button").click(function () {
                    $(".toggleContainer").slideToggle("500");
                }); */
        
                //get category services
                $('button.servicesCategory').click(function(){
                   var catId = $(this).attr('id');
           
                   $(".toggleContainer").hide();
                   $(".cat-loading").show();
           
                   $.ajax({
                       url: "{{ path('category_services',{'_locale' : locale}) }}/"+catId,
                       success: function(msg){
                           if(msg != 'failed'){
                               $(".toggleContainer").html(msg);
                           }
                       },
                       complete : function(){
                           $(".toggleContainer").slideToggle("500");
                           $(".cat-loading").hide();
                       }
                   });
                });
        
                //category pagination links
                $(document).on('click','a.categoryServicesPagination',function(){
                    var linkUrl = $(this).attr('href');
                    $.ajax({
                       url: linkUrl,
                       success: function(msg){
                           if(msg != 'failed'){
                               $(".toggleContainer").html(msg);
                           }
                       },
                       complete : function(){
                       }
                   });
                    return false;
                });
        
                //change service price
                $(document).on('change','.rushOrder',function(){
                    var servicePrice = 0;
                    if($(this).is(":checked")) {
                        servicePrice = $(this).attr('data-rush-price');
                    }else{
                        servicePrice = $(this).attr('data-price');
                    }
                    
                    $(this).parent().parent().find('#servicePrice').text(servicePrice);
                });
        
                //submit service order
                $(document).on('click','.serviceOrderSubmit',function(){
                    var serviceUrl = $(this).attr('data-service-page');
                    //check for rush
                    if($(this).parent().parent().find('.rushOrder').is(':checked')){
                        serviceUrl += '/1';
                    }   
                    window.location = serviceUrl;
                });
            });
            </script>    
{% endblock %}